<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div class="img-container">
      <img :src="imgSrc" :style="imgStyle" alt="">
      <div class="img-text-container">
        <section>
          <div :style="numStyle">432</div>
          <div :style="descStyle">实时总供汽量<br>（T）</div>
        </section>
      </div>
    </div>
    <div :id="uniqueID" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'GongqiliangChart',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: '',
      imgSrc: require('@/assets/linglong/bg_scgqlimg.png')
    }
  },
  created() {
    this.uniqueID = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale

    var option = {
      title: null,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: null,
      color: ['#126CC0', 'red'],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#4FC7FF'
          },
          onZero: false
        },
        axisLabel: {
          textStyle: {
            color: '#A0C8DB'
          }
        }
      },
      yAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
          lineStyle: {
            color: '#4FC7FF'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#A0C8DB'
          }
        },
        data: ['11-28', '11-27', '11-26', '11-25', '11-24', '11-23', '11-22'],
        axisTick: {
          show: true,
          alignWithLabel: true,
          inside: true
        },
        boundaryGap:  [1, 0.1],
      },
      series: [
        {
          name: '2011年',
          type: 'bar',
          stack: 1,
          data: [200, 300, 350, 400, 350, 310, 300],
          barWidth: 10 * scale,
          itemStyle: {
            normal: {

              color: new echarts.graphic.LinearGradient(1, 0, 0, 0,
                [
                  {offset: 0, color: '#18A2E2'},
                  {offset: 1, color: '#39CEA2'}
                ])

            }
          }
        }
      ]
    }

    myChart.setOption(option)

    window.addEventListener('resize', () => {
      // myChart.resize()
    })
  },
  computed: {
    imgStyle() {
      return {
        width: this.$root.setting.scale * 303 + 'px',
        height: this.$root.setting.scale * 180 + 'px'
      }
    },
    numStyle() {
      return {
        fontSize: this.$root.setting.scale * 50 + 'px',
        fontFamily: 'PingFang SC',
        fontWeight: this.$root.setting.scale * 400,
        color: 'rgba(255,253,155,1)'
      }
    },
    descStyle() {
      return {
        fontSize: this.$root.setting.scale * 24 + 'px',
        fontFamily: 'PingFang SC',
        fontWeight: this.$root.setting.scale * 24400,
        color: 'rgba(255,255,255,1)'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.g-container {
  display: flex;
  flex-direction: column;

  .img-container {
    width: auto;
    height: auto;
    text-align: center;
    position: relative;
    .img-text-container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 100%;
      width: 170px;
      z-index: 100;
      background: transparent;
    }
  }
}
</style>
